$(function () {
  /* 渲染数据 */
  rander();

  /* 显示/隐藏搜索框清空内容按钮 */
  function blockOrNone() {
    $("input[type='text']").keyup(function () {
      // 1. 获取搜索框的值 和 删除按钮
      let value = $("input[type='text']").val();
      let idom = $(".del-input");
      // 2. 当搜索框有值的时候显示删除按钮，没值的时候隐藏删除按钮
      value === ""
        ? idom.css({ display: "none" })
        : idom.css({ display: "block" });
    });
  }
  blockOrNone();

  /* 点击清空内容按钮，清空输入框的值 并 隐藏自身 */
  function clearInput() {
    $(".del-input").click(function () {
      $("input[type='text']").val("");
      $(this).css({ display: "none" });
    });
  }
  clearInput();

  /* 点击搜索按钮把搜索框中的内容添加到列表最前面 */
  function history() {
    $("input[type='submit']").click(function () {
      // 1. 获取本地储存数据（有数据就获取，没数据就定义数据）
      let historyArr = JSON.parse(localStorage.getItem("history")) || [];

      // 2. 把用户输入的值添加到数据开头
      historyArr.unshift($("input[type='text']").val());

      // 3. 添加完后把数据存到本地存储中
      localStorage.setItem("history", JSON.stringify(historyArr));

      // 4. 渲染数据
      rander();

      // 5. 清空搜索框的值，隐藏清空按钮
      $("input[type='text']").val("");
      $(".del-input").css({ display: "none" });
    });
  }
  history();

  /* 点击删除按钮清空本地存储内容 */
  function detachLsit() {
    $(".del-li").click(function () {
      if ($("main ul li").length > 0 && confirm("是否确认删除？")) {
        localStorage.removeItem("history");
        rander();
      }
    });
  }
  detachLsit();
});

/* 把本地存储中的数据渲染到ul列中 */
function rander() {
  // 1. 获取本地储存数据（有数据就获取，没数据就定义数据）
  let historyRander = JSON.parse(localStorage.getItem("history")) || [];

  // 2. 循环数组进行dom结构的拼接
  let liStr = "";
  $(historyRander).each(function () {
    liStr += `<li class="c68 bgf025">${this}</li>`;
  });

  // 3. 渲染dom
  $("main ul").html(liStr);
}
